import { Trigger } from '@kedacom/react-next'
import { FC } from 'react'
import shallow from 'zustand/shallow'
import { boxPositionsEntity, TvWallMemberItemEntity } from '../interface'
import { useMeetingTVWallStore } from '../store'
import { handleGetErrorTipText } from '../store.combine'
import { CannotUseIcon, OccupiedIcon, StyledAbnormalWrap, StyledErrorTipWrap } from './style'
/**
 *
 * @param wallCfg 数据源
 * @param occupied 代表是否被占用
 * @param type 盒子异常类型
 * @returns 错误内容JSX
 */
interface ErrorContentProps {
	/**数据源*/
	boxInfo?: TvWallMemberItemEntity
	/**数据源位置*/
	index: number
	/**被占用还是被使用 */
	occupied: boolean
	/**错误类型 */
	error_type: number
	position: boxPositionsEntity
}
export const ErrorContent: FC<ErrorContentProps> = ({ occupied, error_type: type, index, position }) => {
	const { getRate, style_map, correct_style } = useMeetingTVWallStore(
		(state) => ({
			config: state.config,
			correct_style: state.correct_style,
			style_map: state.style_map,
			getRate: state.getRate,
		}),
		shallow
	)
	let _rate = getRate('mcc') /**盒子缩放码率 */
	// let _style_position = style_map[correct_style].positions /**当前电视墙风格位置信息 */
	const { box_x, box_y, box_width, box_height } = position /**盒子位置信息*/
	/**上下左右的偏移量 */
	const _left = box_x * _rate
	const _right = box_y * _rate
	const _width = box_width * _rate
	const _height = box_height * _rate
	return (
		<div style={{ position: 'relative' }}>
			<Trigger
				popup={
					<StyledErrorTipWrap>
						<span>{handleGetErrorTipText(type)}</span>
					</StyledErrorTipWrap>
				}
				trigger="hover"
				popupAlign={{ points: ['rc', 'cc'], offset: [-20, -20] }}
			>
				<StyledAbnormalWrap left={_left} top={_right} width={_width} height={_height}>
					{!occupied && <CannotUseIcon></CannotUseIcon>}
					{occupied && <OccupiedIcon></OccupiedIcon>}
				</StyledAbnormalWrap>
			</Trigger>
		</div>
	)
}
